<template>
    <div class="city">
        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
        <city-alphabet :cities="cities" @change="handleChange"></city-alphabet>
    </div>
</template>
<script>
    import CityHeader from "./components/Header"
    import CitySearch from "./components/Search"
    import CityList from "./components/List"
    import CityAlphabet from "./components/Alphabet"
    import axios from 'axios'

    export default{
        name : 'City',
        components : {
            CityHeader,
            CitySearch,
            CityList,
            CityAlphabet
        },
        data(){
            return {
                cities : {},
                hotCities : [],
                letter : ''
            }
        },
        methods : {
            getCityInfo(){
                axios.get('/go-api/city.json').then(this.handleGetCityInfo)
            },
            handleGetCityInfo(res){
                res = res.data
                if(res.ret && res.data){
                    const data = res.data
                    this.cities = data.cities
                    this.hotCities = data.hotCities
                }
            },
            handleChange(data){
                this.letter = data
            }
        },
        mounted(){
            this.getCityInfo()
        }

    }
</script>
<style scoped lang="scss" type="text/scss">


</style>